<template>
  <div class="box-detail">
    <!-- 头部 -->
    <h4>{{writing.title}}</h4>
    <p>
      <span class="time">发表时间:{{writing.add_time | df}}</span>
      <span class="click">点击:{{writing.click}}</span>
    </p>
    <hr />

    <!-- 图片 -->
    <div class="div">
      <ul>
        <li v-for="(item,index) in list" :key="item.id" class="van-sty">
          <van-image
            width="100%"
            style="display: block;box-shadow: 1px 0 8px 1px rgba(0,0,0,.3);}"
            v-model="show"
            :src="item.src"
            @click="onChange(item.index)"
            :startPosition="index"
          />
        </li>
      </ul>
    </div>

    <!-- 详情 -->
    <p v-html="writing.content"></p>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
import { ImagePreview } from "vant";
export default {
  name: "home",
  mounted() {
    this.getGoodsList();
  },
  computed: {
    ...mapState(["articalId"])
  },
  methods: {
    getGoodsList() {
      axios
        .get("/api/getthumimages/" + this.articalId)
        .then(res => {
          console.log(res);
          this.list = res.data.message;
          console.log(this.list);
        })
        .catch(error => console.log(error));
      axios
        .get("/api/getimageInfo/" + this.articalId)
        .then(res => {
          console.log(res);
          res.data.message[0] && (this.writing = res.data.message[0]);
          console.log("w", this.writing);
        })
        .catch(error => console.log(error));
    },
    onChange(index) {
      this.index = index;
      console.log(this.index);

      ImagePreview(this.list.map(item => item.src));
    }
  },
  data() {
    return {
      list: [],
      writing: {
        title: "",
        add_time: "",
        click: 0,
        id: 0,
        content: ""
      },
      index: 0,
      show: false
    };
  },
  filters: {
    df: function dateformat(date) {
      return date && date.substring(0, 10);
    }
  }
};
</script>
<style lang="less">
.box-detail {
  padding: 8px;
}
ul li {
  float: left;
  width: 33.3333%;
  padding: 5px;
  box-sizing: border-box;
  display: block;
}
.div ul {
  list-style: none;
  margin: 10px 0;
  padding: 0 5px;
  overflow: hidden;
}
h4 {
  text-align: center;
  color: #26a2ff;
  font-size: 15px;
}
p {
  overflow: hidden;
}
.time {
  float: left;
  font-size: 13px;
  color: #8f8f94;
}
.click {
  float: right;
  font-size: 13px;
  color: #8f8f94;
}
</style>
